<template>
  <div class="chat-container">
    <!-- 顶部导航 -->
    <van-nav-bar class="top-nav">
      <template #left>
        <i class="iconfont icon-zuofanhui"></i>
      </template>
      <template #title>
        <span>Eartha</span>
      </template>
    </van-nav-bar>
    <!-- 聊天对话 -->
    <div class="conversations">
      <div class="l-msg msg">
        <van-image
          :src="require('@/assets/头像2.png')"
          class="pic"
          fit="contian"
        ></van-image>
        <div class="l-conversation">
          <span class="text">这种眼霜怎么样？你觉得好吗？</span>
        </div>
      </div>
      <div class="r-msg msg">
        <div class="r-conversation">
          <span class="text">还可以，我已经用了有半年了。</span>
        </div>
        <van-image
          :src="require('@/assets/头像1.png')"
          class="pic"
          fit="contian"
        ></van-image>
      </div>
      <div class="l-msg msg">
        <van-image
          :src="require('@/assets/头像2.png')"
          class="pic"
          fit="contian"
        ></van-image>
        <div class="l-conversation">
          <span class="text">这种眼霜怎么样？你觉得好吗？</span>
        </div>
      </div>
      <div class="r-msg msg">
        <div class="r-conversation">
          <span class="text">还可以，我已经用了有半年了。</span>
        </div>
        <van-image
          :src="require('@/assets/头像1.png')"
          class="pic"
          fit="contian"
        ></van-image>
      </div>
      <div class="l-msg msg">
        <van-image
          :src="require('@/assets/头像2.png')"
          class="pic"
          fit="contian"
        ></van-image>
        <div class="l-conversation">
          <span class="text">这种眼霜怎么样？你觉得好吗？</span>
        </div>
      </div>
      <div class="r-msg msg">
        <div class="r-conversation">
          <span class="text">还可以，我已经用了有半年了。</span>
        </div>
        <van-image
          :src="require('@/assets/头像1.png')"
          class="pic"
          fit="contian"
        ></van-image>
      </div>
      <div class="l-msg msg">
        <van-image
          :src="require('@/assets/头像2.png')"
          class="pic"
          fit="contian"
        ></van-image>
        <div class="l-conversation">
          <span class="text">这种眼霜怎么样？你觉得好吗？</span>
        </div>
      </div>
      <div class="r-msg msg">
        <div class="r-conversation">
          <span class="text">还可以，我已经用了有半年了。</span>
        </div>
        <van-image
          :src="require('@/assets/头像1.png')"
          class="pic"
          fit="contian"
        ></van-image>
      </div>
      <div class="l-msg msg">
        <van-image
          :src="require('@/assets/头像2.png')"
          class="pic"
          fit="contian"
        ></van-image>
        <div class="l-conversation">
          <span class="text">这种眼霜怎么样？你觉得好吗？</span>
        </div>
      </div>
      <div class="r-msg msg">
        <div class="r-conversation">
          <span class="text">还可以，我已经用了有半年了。</span>
        </div>
        <van-image
          :src="require('@/assets/头像1.png')"
          class="pic"
          fit="contian"
        ></van-image>
      </div>
    </div>
    <!-- 底部区域 -->
    <div class="chat-bottom">
      <div class="comment">
        <i class="iconfont icon-edit"></i>
        <van-field class="comment-btn" />
      </div>
      <div class="right">
        <i class="iconfont icon-microphone"></i>
        <i class="iconfont icon-camera"></i>
      </div>
    </div>
    <!-- /底部区域 -->
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {}
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
// 关闭遮罩层图标位置
.van-popup__close-icon--top-left {
  opacity: 0;
  top: 25px;
  left: 62px;
  font-size: 36px;
  color: #535353;
}
.chat-container {
  padding: 0 64px;
  //   头部
  .top-nav {
    margin-bottom: 20px;
  }
  .van-nav-bar__left {
    padding: 0 !important;
  }

  //   底部
  .chat-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    height: 88px;
    background-color: #fff;
    .iconfont {
      color: #a6a6b0;
      font-size: 40px;
    }
    .comment {
      display: flex;
      align-items: center;
      .icon-edit {
        margin-right: 20px;
      }
      .comment-btn {
        padding: unset;
        border-radius: 30px;
        width: 282px;
        height: 46px;
        border: 2px solid #eeeeee;
        font-size: 30px;
        line-height: 46px;
        color: #a7a7a7;
        /deep/ .van-field__body {
          padding-left: 30px;
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      .icon-microphone {
        margin-right: 30px;
      }
      .icon-camera {
        font-size: 60px;
      }
    }
  }
  //   聊天对话
  .conversations {
    overflow-y: auto;
    height: 85vh;
    .msg {
      margin-bottom: 80px;
      display: flex;
      align-items: center;
      .pic {
        width: 86px;
        height: 86px;
      }
    }
    .l-msg {
      float: left;

      .pic {
        margin-right: 20px;
      }
      .text {
        font-size: 22px;
        color: #9b9b9b;
        line-height: 56px;
      }
      .l-conversation {
        padding-left: 15px;
        // padding-right: 20px;
        width: auto;
        height: 56px;
        background: url('~@/assets/l-conversation.png') no-repeat;
        background-size: contain;
      }
    }
    .r-msg {
      float: right;
      //   justify-content: right;
      .pic {
        margin-left: 20px;
      }
      .text {
        font-size: 22px;
        color: #fff;
        line-height: 56px;
      }
      .r-conversation {
        padding-left: 15px;
        width: auto;
        height: 56px;
        background: url('~@/assets/r-conversation.png') no-repeat;
        background-size: contain;
      }
    }
  }
}
</style>
